<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作网页播放器</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #audio{
            display: none;
        }
        #player{
            width: 500px;
            border: 1px solid #cccccc;
            margin: 50px auto;
            padding: 20px;
        }
        #progress{
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background-color: black;
            overflow: hidden;
        }
        #go{
            width: 0%;
            height: 6px;
            background-color:red;
            border-radius: 3px;
        }
        #control{
            margin-top: 10px;
        }
        #btn{
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="player">
        <audio id="audio" controls src="./audio/光年之外.m4a" loop></audio>
        <div id="progress">
            <div id="go"></div>
        </div>
        <div id="control" class="flex j-s">
            <button id="btn">播放</button>
            <div id="time" class="flex">
                <div id="time1">00:00</div>
                <div style="width: 20px;text-align: center;">/</div>
                <div id="time2">00:00</div>
            </div>
        </div>
    </div>
    <script src="../js/bing.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //获取播放器对象
        let audio = document.getElementById('audio')
        //播放按钮点击事件
        $('#btn').click(function(){
            //获取总时间
            let {duration} = audio;
            //将总时间，返回成时分秒的格式
            let hms = $b.getHMSbyMs(duration*1000)
            //显示总时间
            $('#time2').text(hms.m+":"+hms.s)

            //判断播放器是否暂停
            if(audio.paused){
                audio.play()  //播放
                $(this).text('暂停')
            }else{
                audio.pause() //暂停
                $(this).text('播放')
            }
        })
       
      
        //定时器更新进度条
        setInterval(() => {
            //获取当前已经播放的时间 和 总时间
            let {currentTime,duration} = audio;
            //算出播放比例
            let percent = currentTime / duration * 100 + '%'
            //更新进度条
            $('#go').css({
                width:percent
            })
            //将已经播放的时间，返回成时分秒的格式
            let hms = $b.getHMSbyMs(currentTime*1000)
            //显示播放时间
            $('#time1').text(hms.m+":"+hms.s)
        }, 500);

        //进度条点击事件
        $('#progress').click(function(e){
            //获取总时间
            let {duration} = audio;
            //获取鼠标点击处在进度条上的宽度
            let width = e.pageX-$(this).offset().left
            //算出比例
            let percent = width / $(this).innerWidth()
            //算出对应的时间
            let time = duration * percent
            //更新播放时间
            audio.currentTime = time
           
        })
    </script>
</body>
</html>